'use client';

import { useParams } from 'next/navigation';

// Next Intl
// import { useRouter } from 'next-intl/client'; // This useRouter is wrapped with next/navigation useRouter

// ShadCn
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';

import { Badge } from '@/components/ui/badge';

// Variables
import { LOCALES } from '@/lib/variables';
import { useRouter } from '@/i18n/routing';

const LanguageSelector = () => {
    const router = useRouter();
    const params = useParams<any>();

    const handleLanguageChange = (lang: string) => {
        router.push('/', { locale: lang });
    };

    return (
        <div>
            {/* @ts-ignore */}
            <Select value={params.locale.toLocaleString()} onValueChange={(lang: any) => handleLanguageChange(lang)}>
                {/* @ts-ignore */}
                <SelectTrigger className="w-[10rem] relative" aria-label="Languages">
                    <Badge className="position: absolute -top-4 -left-2 font-normal">BETA</Badge>
                    {/* @ts-ignore */}
                    <SelectValue placeholder="Select a language" />
                </SelectTrigger>
                {/* @ts-ignore */}
                <SelectContent
                    style={{
                        overflowY: 'hidden',
                        height: 'min-content',
                    }}
                >
                    {/* @ts-ignore */}
                    <SelectGroup>
                        {/* @ts-ignore */}
                        <SelectLabel>Languages</SelectLabel>

                        {LOCALES.map((locale) => {
                            return (
                                // @ts-ignore
                                <SelectItem key={locale.code} value={locale.code}>
                                    {locale.name}
                                </SelectItem>
                            );
                        })}
                    </SelectGroup>
                </SelectContent>
            </Select>
        </div>
    );
};

export default LanguageSelector;
